<template>
  <div class="page">
    <div class="bg"></div>
    <Breadcrumbs></Breadcrumbs>
    <div class="container card">
      <div class="card-header">
        <div class="card_bg">交易公告</div>
        <div class="tags">
          <div
            :class="tagsIdx == index ? 'a_ls ls' : 'ls'"
            @click="changeTagsIdx(item, index)"
            v-for="(item, index) in tags"
            :key="item.lx"
          >
            {{ item.lx }}
          </div>
        </div>
      </div>
      <div class="card-body">
        <div class="card_nav">
          <div class="nav_info">
            <div class="nav_info_title">招标公告</div>
            <div class="nav_info_tag" v-if="tagsIdx != 0">
              <div
                :class="index == labTagsIdx ? 'labs alabs' : 'labs'"
                v-for="(item, index) in labTags"
                :key="item.t"
                @click="chengLabTags(item, index)"
              >
                {{ item.t }}
              </div>
            </div>
          </div>
          <div class="nav_ss_box">
            <input placeholder="请输入关键词" v-model="keyword" />
            <button @click="getkeyword">搜 索</button>
          </div>
        </div>
        <div
          v-if="tableData.length == 0"
          style="text-align: center; margin: 41px; color: #858484"
        >
          暂无数据
        </div>
        <div
          class="list"
          v-for="item in tableData"
          @click="goDetail(item)"
          :key="item.noticeId"
        >
          <div class="tiem">
            <div>
              {{ splitDate(item.fbrq)["month"] }}-{{
                splitDate(item.fbrq)["day"]
              }}
            </div>
            <div>{{ splitDate(item.fbrq)["year"] }}</div>
          </div>
          <div class="list_info">
            <div class="info_title line_1">
              {{ item.bt }}
            </div>
            <div class="info_rows">
              <div>
                招标方式：<span>{{ item.zbfs }}</span>
              </div>
              <div>
                报名截止时间：<span>{{ item.fbrq }}</span>
              </div>
            </div>
          </div>
          <div class="list_more"></div>
        </div>
        <Pagination
          :page.sync="pageNum"
          :limit.sync="pageSize"
          :total="total"
          @pagination="getData"
        ></Pagination>
      </div>
    </div>
    <div style="padding-top: 90px"></div>
  </div>
</template>
<script>
import { splitDate } from "../../utils/index";
export default {
  name: "transaction",
  data() {
    return {
      tags: [],
      labTags: [
        {
          t: "工程招标",
          v: "工程",
        },
        {
          t: "货物招标",
          v: "货物",
        },
        {
          t: "服务招标",
          v: "服务",
        },
      ],
      labTagsIdx: 0,
      tagsIdx: 0,
      pageSize: 10,
      pageNum: 1,
      total: 0,
      tableData: [],
      lxCode: "",
      zl: "",
      keyword: "",
    };
  },
  created() {
    this.$api.getHomeAPI({}).then((item) => {
      let itemData = item.data["招标动态"][0];
      this.tags = [
        { lx: "全部交易公告", lxCode: "" },
        ...item.data["招标动态"],
      ];

      this.keyword = this.$route.query.keyWord;
      this.getData();
    });
  },
  methods: {
    goDetail(row) {
      this.$router.push({
        path: "/detail",
        query: {
          noticeId: row.noticeId,
        },
      });
    },
    getData() {
      this.$api
        .noticeListAPI({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          lxCode: this.lxCode,
          zl: this.zl,
          keyword: this.keyword,
        })
        .then((res) => {
          let { list, total } = res.data;
          this.tableData = list;
          this.total = total;
        });
    },
    getkeyword() {
      this.pageNum = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableData = [];
      this.getData();
    },
    changeTagsIdx(item, idx) {
      this.tagsIdx = idx;
      this.labTagsIdx = 0;
      this.lxCode = item.lxCode;
      this.zl = idx == 0 ? "" : "工程";
      this.pageNum = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableData = [];
      this.getData();
    },
    chengLabTags(item, index) {
      this.labTagsIdx = index;
      this.zl = item.v;
      this.pageNum = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableData = [];
      this.getData();
    },
    splitDate(date) {
      return splitDate(date);
    },
  },
};
</script>
<style scoped>
.list {
  display: flex;
  align-items: center;
  padding: 31px 0;
  border-bottom: 1px solid #e5e5e5;
  height: 60px;
}
.list:hover .tiem {
  color: rgb(255, 255, 255);
  background: #2959b0;
}
.list:hover .list_info .info_title {
  color: #2959b0;
}
.list:hover .list_more {
  background-image: url("@/static/icon/jy_icon_hover.png");
}
.list .tiem {
  width: 60px;
  height: 60px;
  background: #f8f8f8;
  flex-shrink: 0;
  margin-right: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #000000;
}
.list .tiem div:nth-child(1) {
  margin-bottom: 13px;
}
.list .tiem div:nth-child(2) {
  font-size: 12px;
}
.list .list_info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 60px;
  width: 100%;
}
.list .list_more {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-image: url("@/static/icon/jy_icon.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.list .list_info .info_rows {
  display: flex;
}
.list .list_info .info_title {
  font-size: 18px;
  font-weight: 700;
  color: #000000;
}
.list .list_info .info_rows div {
  font-size: 14px;
  color: #333333;
}
.list .list_info .info_rows div:nth-child(1) {
  flex: 0.4;
}

.card_nav {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e5e5e5;
}
.card_nav .nav_info .nav_info_tag {
  display: flex;
  margin-top: 21px;
}
.card_nav .nav_info .nav_info_tag .labs {
  margin-right: 41px;
  cursor: pointer;
}
.card_nav .nav_info .nav_info_tag .alabs {
  padding-bottom: 30px;
  border-bottom: #2959b0 2px solid;
  color: #2959b0;
}
.card .nav_info .nav_info_title {
  font-weight: bold;
  margin-bottom: 31px;
  font-size: 22px;
}
.nav_ss_box {
  width: 445px;
  height: 40px;
  background: #f5f5f5;
  border-radius: 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav_ss_box input {
  border: none;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  border-radius: 20px;
  padding-left: 31px;
}
.nav_ss_box button {
  flex-shrink: 0;
  width: 105px;
  height: 100%;
  background: #2959b0;
  border-radius: 0px 20px 20px 0px;
  color: white;
  border: 1px solid #2959b0;
}
.nav_ss_box input:focus {
  outline: none;
}
.card {
  margin-top: 42px;
  background: #ffffff;
  display: flex;
}

.card .card-header {
  width: 330px;
  height: fit-content;
  background: #f8f8f8;
}

.card .card-header .card_bg {
  background-image: url("@/static/img/jygg_t.png");
  height: 108px;
  background-repeat: no-repeat;
  background-size: cover;
  font-size: 22px;
  font-family: Source Han Sans CN, Source Han Sans CN-Bold;
  font-weight: 700;
  text-align: left;
  color: #ffffff;
  line-height: 108px;
  padding-left: 31px;
}
.tags .ls {
  height: 67px;
  line-height: 67px;
  text-align: center;
  margin: 15px;
  cursor: pointer;
  font-size: 16px;
}
.tags .a_ls {
  background-color: #ffffff;
  margin: 15px;
  cursor: pointer;
  color: #2959b0;
}
.card .card-body {
  margin-left: 53px;
  width: 100%;
}

.bg {
  height: 300px;
  background-image: url("@/static/img/jygg.png");
  background-repeat: no-repeat;
  background-size: cover;
}
</style>